<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>timeline</title>
    <style>
        .timeline-small {
            max-width: 500px;
            /*max-height: 630px;*/
            max-height: 100%;
            overflow: hidden;
            margin: 30px auto 0;
            box-shadow: 0 0 40px #a0a0a0;
            font-family: 'Open Sans', sans-serif;
        }
        .timeline-small-body ul {
            padding: 1em 0 0 2em;
            margin: 0;
            list-style: none;
            position: relative;
        }
        /* */
        .timeline-small-body ul::before {
            /*时间轴线*/
            content: ' ';
            height: 100%;

            width: 1px;
            background-color: #d9d9d9;
            position: absolute;
            top: 0;
            /*时间轴线 左侧偏移距离*/
            left: 8em;
            z-index: -1;
        }
        .timeline-small-body li div {
            display: inline-block;
            margin: 1em 0;
            vertical-align: top;
        }
        .timeline-small-body .bullet {
            width: 1rem;
            height: 1rem;
            box-sizing: border-box;
            border-radius: 50%;
            background: #fff;
            z-index: 1;
            margin-right: 1rem;
            margin-top: 5%;
            /*background: #fff url("./images/jd.png");*/
        }
        /*定义时间轴上的节点颜色样式*/
        .timeline-small-body .bullet.pink {
            background-color: #585861;
            border: 3px solid #9C9CA7;
        }
        .timeline-small-body .bullet.green {
            background-color: lightseagreen;
            border: 3px solid #B0E8E2;
        }
        .timeline-small-body .bullet.blue {
            background-color: aquamarine;
            border: 3px solid cadetblue;
        }
        .timeline-small-body .bullet.orange {
            background-color: salmon;
            border: 3px solid #EB8B6E;
        }
        /*事件轴  时间节点  样式*/
        .timeline-small-body .date {
            width: 15%;
            font-size: 0.75em;
            padding-top: 0.80rem;
            padding-right: 2rem;

        }
        /*事件面板属性*/
        .timeline-small-body .desc {
            width: 50%;
            background-color: bisque;
        }
        .timeline-small-body h3 {
            font-size: 0.9em;
            font-weight: 400;
            margin: 0;
        }
        .timeline-small-body h4 {
            margin: 0;
            font-size: 0.7em;
            font-weight: 400;
            color: #808080;
        }
    </style>
</head>

<body>

<!-- 主要内容部分 -->
<div class="timeline-small">
    <div class="timeline-small-body">
        <ul>
            <li>
                <div class="date">T01700</div>
                <div class="bullet green"></div>

                <div class="desc">
                    <h3><a>核心系统-流动性卸数</a></h3>
                    <h4>头寸管理-流动性下午卸数</h4>
                </div>
            </li>
            <li>
                <div class="date">T02100</div>
                <div class="bullet green"></div>

                <div class="desc">
                    <h3>核心系统-核心-调度开始</h3>
                    <h4>头寸管理</h4>
                </div>
            </li>
            <li>
                <div class="date">T02200</div>
                <div class="bullet pink"></div>

                <div class="desc">
                    <h3>头寸管理-mv_data.sh</h3>
                    <h4>头寸管理-gunzip_data.sh</h4>
                </div>
            </li>
            <li>
                <div class="date">T02300</div>
                <div class="bullet pink"></div>

                <div class="desc">
                    <h3>ECIF-核心法人透支客户标签加载</h3>
                    <h4>ECIF-对账系统-对账系统签约信息</h4>
                </div>
            </li>
            <li>
                <div class="date">T02400</div>
                <div class="bullet pink"></div>

                <div class="desc">
                    <h3>ECIF-核心法人透支客户标签加载</h3>
                    <h4>ECIF-对账系统-对账系统签约信息</h4>
                    <h3>ECIF-核心法人透支客户标签加载</h3>
                    <h4>ECIF-对账系统-对账系统签约信息</h4>
                    <h3>ECIF-核心法人透支客户标签加载</h3>
                    <h4>ECIF-对账系统-对账系统签约信息</h4>
                    <h3>ECIF-核心法人透支客户标签加载</h3>
                    <h4>ECIF-对账系统-对账系统签约信息</h4>
                </div>
            </li>
            <li>
                <div class="date">T02400</div>
                <div class="bullet pink"></div>

                <div class="desc">
                    <h3>ECIF-核心法人透支客户标签加载</h3>
                    <h4>ECIF-对账系统-对账系统签约信息</h4>
                    <h3>ECIF-核心法人透支客户标签加载</h3>
                    <h4>ECIF-对账系统-对账系统签约信息</h4>
                    <h3>ECIF-核心法人透支客户标签加载</h3>
                    <h4>ECIF-对账系统-对账系统签约信息</h4>
                    <h3>ECIF-核心法人透支客户标签加载</h3>
                    <h4>ECIF-对账系统-对账系统签约信息</h4>
                </div>
            </li>
        </ul>
    </div>
</div>

</body>



</html>

